<template>
  <div id="administrator">
    <h1>管理员管理</h1>
    <!-- 表格 -->
    <el-table :data="administratorData" stripe border class="el-table">
      <el-table-column prop="id" label="id" align="center"></el-table-column>
      <el-table-column prop="mail" label="邮箱" align="center"></el-table-column>
      <el-table-column prop="initialTime" label="注册时间" align="center"></el-table-column>
      <el-table-column prop="lastTime" label="最后登录时间" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button @click="currentAdmin = scope.row; adminEditShow = true;" type="primary"
            :disabled="loginAdmin.id != scope.row.id" icon="el-icon-edit"></el-button>
          <el-button @click="currentAdmin = scope.row; adminDeleteShow = true;" type="primary"
            :disabled="loginAdmin.id != scope.row.id" icon="el-icon-delete"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="adminDeleteShow" width="30%">
      <span>确定删除该管理员么</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="adminDeleteShow = false;">取 消</el-button>
        <el-button type="primary" @click="deleteAdministrator(currentAdmin.id); adminDeleteShow = false;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑提示框 -->
    <el-dialog title="管理员" :visible.sync="adminEditShow">
      <el-form :model="currentAdmin" label-position="top">
        <el-form-item>
          <span>id：{{ currentAdmin.id }}</span>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="currentAdmin.mail" type="input" clearable placeholder="请输入管理员邮箱"></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <p>{{ currentAdmin.initialTime }}</p>
        </el-form-item>
        <el-form-item label="最后登录日期：">
          <p>{{ currentAdmin.lastTime }}</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adminEditShow = false">取 消</el-button>
        <el-button type="primary" @click="updateAdmin(); adminEditShow = false">提
          交</el-button>
      </div>
    </el-dialog>
    <h1>管理员添加</h1>
    <div id="adminUpload">
      <el-form :model="adminUpload" :rules="fromRules" ref="form">
        <el-form-item prop="mail">
          <div>
            邮箱
            <el-input v-model="adminUpload.mail" placeholder="请输入管理员邮箱" type="input" clearable></el-input>
          </div>
        </el-form-item>
      </el-form>
      <el-button @click="addAdministrator" type="success">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mail: '',
      administratorData: [],
      currentAdmin: {}, // 当前选中管理员
      adminDeleteShow: false,
      adminEditShow: false,
      adminUpload: {
        mail: '',
      },
      loginAdmin: {
        id: ''
      }, // 当前登录管理员
      fromRules: {
        mail: [
          { required: true, message: '请输入管理员邮箱', trigger: 'blur' },
        ],
      }, // 表单规则
    }
  },
  methods: {
    // 添加管理员
    addAdministrator() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 数据准备
          let data = new FormData
          data.append("mail", this.adminUpload.mail)
          this.$axios({
            method: 'post',
            url: '/admin/login/addAdministrator',
            data: data,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then(res => {
            if (res.data) {
              this.$router.go(0) // 刷新页面
              this.$message({
                message: '提交成功',
                type: 'success',
                showClose: true,
              })
            } else {
              this.$message({
                message: '提交失败！出现错误了X.X',
                type: 'error',
                showClose: true,
              })
            }
          })
        } else {
          this.$message({
            showClose: true,
            message: '请完善数据再提交哦',
            type: 'error'
          })
        }
      })

    },
    // 删除管理员
    deleteAdministrator(id) {
      this.$axios({
        method: 'post',
        url: '/admin/login/deleteAdministrators/' + id
      }).then(res => {
        if (res.data) {
          this.$router.go(0) // 刷新页面
          this.$message({
            message: '提交成功',
            type: 'success',
            showClose: true,
          })
        } else {
          this.$message({
            message: '删除失败！出现错误了X.X',
            type: 'error',
            showClose: true,
          })
        }
      })
    },
    // 获取管理员信息
    getAdminData() {
      this.$axios({
        method: 'post',
        url: '/admin/login/getAllAdministrators'
      }).then(res => {
        res.data.forEach(element => { // 分割时间
          element.initialTime = element.initialTime.slice(0, 10) + ' ' + element.initialTime.slice(11, 19)
          element.lastTime = element.lastTime.slice(0, 10) + ' ' + element.lastTime.slice(11, 19)
        });
        this.administratorData = res.data
      })
    },
    // 更新管理员邮箱
    updateAdmin() {
      this.$axios({
        method: 'post',
        url: '/admin/login/updateMail/' + this.currentAdmin.id + '/' + this.currentAdmin.mail,
      }).then(res => {
        if (res.data) {
          this.$router.go(0)
          this.$message({
            message: '提交成功',
            type: 'success',
            showClose: true,
          })
        } else {
          this.$message({
            message: '提交失败！出现错误了X.X',
            type: 'error',
            showClose: true,
          })
        }
      })
    },
    // 查看当前登录的管理员
    getLoginAdmin() {
      this.$axios({
        method: 'post',
        url: '/admin/login/getAdministrator/' + sessionStorage.getItem('token')
      }).then(res => {
        this.loginAdmin = res.data
      })
    }
  },
  mounted() {
    this.getAdminData()
    this.getLoginAdmin()
  }
}
</script>
<style lang="scss" scoped>
#adminUpload {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

#administrator {
  padding: 30px 0;
}

h1 {
  color: #fff;
  padding-left: 20px;
  margin: 20px 0;
}
</style>
<style scoped="scope" scope>
/* 表格 */
.el-table {
  width: 80%;
  margin: 0 auto;
  border-radius: 20px;
}

.el-table__row {
  background-color: rgba(0, 0, 0, 0);
}

/deep/.el-table--border {
  border-color: #464646;
}

/deep/.el-table th.el-table__cell.is-leaf {
  border-color: #464646;
}

/deep/ .el-table thead tr>th {
  background-color: #202020 !important;
  color: #464646;
  border-color: #464646;
}

/deep/ .el-table tbody tr>td {
  background-color: #202020 !important;
  border-color: #464646;
}

/deep/.el-table::before,
/deep/.el-table__fixed-right::before {
  background-color: rgba(0, 0, 0, 0);
}

/* 上传Bar */
/deep/#adminUpload .el-input__inner {
  background-color: #202020;
  color: #fff;
  text-align: center;
  width: 300px;
}
</style>